<template>
  <div>
    <el-container style="height: 100%; border: 1px solid rgb(253, 252, 252)">
      <el-aside width="200px" style="background-color: rgb(255, 255, 255)">
        <div>
          <el-col ><div class="abc"></div></el-col>
          <el-select v-model="value" placeholder="请选择" size="small" @change=getWell2>
            <el-option
              v-for="item in data2"
              :key="item.index"
              :label="item.company"
              :value="item.company"
              >
            </el-option>
          </el-select>
        <el-input
        size="small"
      placeholder="关键字查询"
      v-model="filterText"
      >
    </el-input>
  </div>
      <el-tree
      node-key="cm_WorkBaseInfo_ID"
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree"
      :check-on-click-node="true"
      highlight-current
      @check-change="handleClick"
      check-strictly
      >
    </el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <el-tag type="success">基本数据</el-tag>
          <el-table
  :data="tableData1"
  style="width: 100%"
  border
 >
  <el-table-column
    prop="rowName"
    label="基本数据项"
    width="400">
  </el-table-column>
  <el-table-column
    prop="rowData"
    label="基本数据"
    width="400">
  </el-table-column>
</el-table>
<el-tag type="success">施工配方和性能</el-tag>
<el-table
  :data="tableData2"
  style="width: 100%"
  border
  >
  <el-table-column
    prop="project"
    label="项目"
    width="200">
  </el-table-column>
  <el-table-column
    prop="firstMud"
    label="首浆"
    width="200">
  </el-table-column>
  <el-table-column
  prop="midMud"
  label="中间液体"
  width="200">
</el-table-column>
  <el-table-column
  prop="lastMud"
  label="尾浆"
  width="200">
</el-table-column>
</el-table>
<el-tag type="success">作业数据</el-tag>
<el-table
  :data="tableData3"
  style="width: 100%"
  border
  >
  <el-table-column
    prop="project"
    label="项目"
    width="200">
  </el-table-column>
  <el-table-column
    prop="firstMud"
    label="首浆"
    width="200">
  </el-table-column>
  <el-table-column
  prop="midMud"
  label="中间液体"
  width="200">
</el-table-column>
  <el-table-column
  prop="lastMud"
  label="尾浆"
  width="200">
</el-table-column>
</el-table>
<el-tag type="success">前置液</el-tag>
<el-table
  :data="tableData4"
  style="width: 100%"
  border
  >
  <el-table-column
    prop="fluid"
    label="前置液"
    width="200">
  </el-table-column>
  <el-table-column
    prop="composition"
    label="组成及性能"
    width="200">
  </el-table-column>
  <el-table-column
  prop="density"
  label="密度"
  width="200">
</el-table-column>
<el-table-column
prop="Vol"
label="用量"
width="200">
</el-table-column>
</el-table>

        </el-main>
      </el-container>
    </el-container>
</div>
</template>

<script>
  import {Tag} from 'element-ui'
    import {
      getWell,
      getWellById,
      getWellById2
  } from '@/api/module/wellFind'
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    mounted() {
      this.getWell()
    },
    components: {
      elTag: Tag
    },
    methods: {
      handleClick(data, checked, node) {
         if (checked) {
       this.$refs.tree.setCheckedNodes([data])
       if (typeof data.children === 'undefined') {
       this.getDWell1()
       this.getDWell2()
       this.getDWell3()
       this.getDWell4()
      }
          }
},
      getDWell1() {
        this.cm_WorkBaseInfo_ID = this.$refs.tree.getCheckedKeys()
        this.submit = this.$refs.tree.getCheckedNodes()
        this.cm_WorkBaseInfo_ID.forEach(item => {
          if (typeof item === 'undefined') {

          } else {
            this.b = item
          }
        })
        console.log(this.b)
        console.log(this.cm_WorkBaseInfo_ID)
        getWellById(this.b).then((res) => {
          this.tableData1 = res.data.table1
        }).catch((err) => {
          this.$message.error(err.message)
        })
      },
      getDWell2() {
        this.cm_WorkBaseInfo_ID = this.$refs.tree.getCheckedKeys()
        this.submit = this.$refs.tree.getCheckedNodes()
        this.cm_WorkBaseInfo_ID.forEach(item => {
          if (typeof item === 'undefined') {

          } else {
            this.b = item
          }
        })
        getWellById(this.b).then((res) => {
          this.tableData2 = res.data.table2
          console.log(this.tableData2)
        }).catch((err) => {
          this.$message.error(err.message)
        })
      },
      getDWell3() {
        this.cm_WorkBaseInfo_ID = this.$refs.tree.getCheckedKeys()
        this.submit = this.$refs.tree.getCheckedNodes()
        this.cm_WorkBaseInfo_ID.forEach(item => {
          if (typeof item === 'undefined') {
          } else {
            this.b = item
          }
        })
        getWellById(this.b).then((res) => {
          this.tableData3 = res.data.table3
          console.log(this.tableData3)
        }).catch((err) => {
          this.$message.error(err.message)
        })
      },
      getDWell4() {
        this.cm_WorkBaseInfo_ID = this.$refs.tree.getCheckedKeys()
        this.submit = this.$refs.tree.getCheckedNodes()
        this.cm_WorkBaseInfo_ID.forEach(item => {
          if (typeof item === 'undefined') {

          } else {
            this.b = item
          }
        })
        getWellById(this.b).then((res) => {
          this.tableData4 = res.data.table4
        }).catch((err) => {
          this.$message.error(err.message)
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      getWell() {
        getWell().then((res) => {
          this.data = res.data.data
          this.data2 = res.data.data2
          this.value = res.data.data3
        }).catch((err) => {
          this.$message.error(err.message)
        })
      },
      getWell2() {
           this.nCompany = encodeURIComponent(this.value)
           getWellById2(this.nCompany).then((res) => {
             this.data = res.data.data
        }).catch((err) => {
          this.$message.error(err.message)
        })
      }

    },
    data() {
      return {
        b: [],
        nCompany: '',
        value: [],
        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData4: [],
        cm_WorkBaseInfo_ID: '',
        filterText: '',
        submit: [],
        data: [],
        data2: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
    }

</script>
<style scoped>
  .el-header {
    background-color: rgb(62, 116, 187);
    color: rgb(244, 245, 240);
    line-height: 60px;
  }
  .el-aside {
    color: rgb(140, 123, 179);
  }
  .abc{
    color: rgb(244, 245, 240);
    height: 19px;
  }
</style>
